<template>
  <div class="app-container">
    <div class="data-info">
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>今日累计签收采购单</p>
                <el-tooltip
                  effect="dark"
                  content="统计当日累计签收采购单数量"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">2</div>
            </div>
          </el-card>
        </el-col>
        <!-- <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>今日累计签收</p>
                <el-tooltip
                  effect="dark"
                  content="统计当日累计签收数量"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">2</div>
            </div>
          </el-card>
        </el-col> -->
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>今日累计确认账单金额</p>
                <el-tooltip
                  effect="dark"
                  content="统计当日累计确认账单的总金额"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">￥78,000.00</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>本月累计签收采购单</p>
                <el-tooltip
                  effect="dark"
                  content="统计本月累计签收采购单数量"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">2</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>今日累计确认账单金额</p>
                <el-tooltip
                  effect="dark"
                  content="统计当日累计确认账单的总金额"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">￥178,000.00</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :span="11">
          <el-card>
            <!-- 民商信状态分布 -->
            <div class="table">
              <div class="table-title">订单管理（待办事项）</div>
              <div class="table-line"></div>
              <div class="table-content">
                <el-table :data="purchasingManagementList" style="width: 100%">
                  <el-table-column
                    prop="messageTitle"
                    label="待办项"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="messageName"
                    label="采购计划名称"
                    width="200"
                  >
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="toSign(scope.row, 1)"
                        >签收</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  class="text-center bgfff pd10 flex-shrink-0"
                  v-show="queryParams1.total > 0"
                  :total="queryParams1.total"
                  :page.sync="queryParams1.pageNum"
                  :limit.sync="queryParams1.pageSize"
                  @pagination="getList1"
                />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :span="11">
          <el-card>
            <div class="table">
              <div class="table-title">对账单管理（待办事项）</div>
              <div class="table-line"></div>
              <div class="table-content">
                <el-table :data="statementManagementList" style="width: 100%">
                  <el-table-column prop="sureBill" label="待办项" width="180">
                  </el-table-column>
                  <el-table-column prop="number" label="账单编号" width="180">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="toDealWith(scope.row, 2)"
                        >去处理</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  class="text-center bgfff pd10 flex-shrink-0"
                  v-show="queryParams2.total > 0"
                  :total="queryParams2.total"
                  :page.sync="queryParams2.pageNum"
                  :limit.sync="queryParams2.pageSize"
                  @pagination="getList2"
                />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :title="title"
      top="15vh !important"
      width="70%"
      :visible="dialogVisible"
      @close="dialogVisible = false"
    >
      <el-form
        :model="updateParams"
        label-width="120px"
        ref="updateForm"
        :rules="updateRules"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="计划编号" prop="planCode">
              <el-input
                :disabled="isView"
                class="w200"
                v-model="updateParams.planCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划名称" prop="planName">
              <el-input
                :disabled="isView"
                class="w200"
                v-model="updateParams.planName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申报单位" prop="companyName">
              <el-input
                class="w200"
                :disabled="isView"
                v-model="updateParams.companyName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="采购商" prop="buyer">
              <el-input
                class="w200"
                disabled
                v-model="updateParams.buyer"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="plan-detail">
          <div class="title">计划详情</div>
          <div class="content">
            <el-table :data="planData" height="200px">
              <el-table-column
                type="selection"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                align="center"
                label="序号"
                prop="sn"
              ></el-table-column>
              <el-table-column
                align="center"
                label="项目名称"
                prop="projectName"
              ></el-table-column>
              <el-table-column
                align="center"
                label="钢材总量计划"
                prop="total"
              ></el-table-column>
              <el-table-column
                align="center"
                label="建筑面积(M)"
                prop="area"
              ></el-table-column>
              <el-table-column
                align="center"
                label="商品名称"
                prop="name"
              ></el-table-column>
              <el-table-column
                align="center"
                label="规格"
                prop="specification"
              ></el-table-column>
              <el-table-column
                align="center"
                label="预算(预计数量)"
                prop="budget"
              ></el-table-column>
              <el-table-column
                align="center"
                label="计划到场日期"
                prop="planTime"
              ></el-table-column>
              <el-table-column
                align="center"
                label="使用部位"
                prop="part"
              ></el-table-column>
              <el-table-column
                align="center"
                label="备注"
                prop="remark"
              ></el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="现场主管" prop="manager">
                  <el-input
                    class="w200"
                    :disabled="isView"
                    v-model="updateParams.manager"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目经理" prop="pm">
                  <el-input
                    class="w200"
                    :disabled="isView"
                    v-model="updateParams.pm"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="材料员" prop="materialMan">
                  <el-input
                    class="w200"
                    :disabled="isView"
                    v-model="updateParams.materialMan"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div class="img-info">
        <div class="title">图片信息</div>
        <div class="content">
          <el-upload
            :disabled="isView"
            name="files"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleImageChange"
            :auto-upload="false"
            :file-list="fileList"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <!-- <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span> -->
              </span>
            </div>
          </el-upload>
          <el-dialog
            :modal-append-to-body="false"
            :visible.sync="previewImgDialog"
            width="500px"
          >
            <img width="100%" :src="previewImgSrc" alt="" />
          </el-dialog>
        </div>
      </div>
      <div class="update-btn">
        <el-button type="primary" size="small" @click="confirmSign">
          确认签收
        </el-button>
        <el-button type="warning" size="small" @click="rejectSign">
          拒绝签收
        </el-button>
        <el-button type="warning" size="small" @click="dialogVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      dialogVisible: false,
      previewImgDialog: false,
      previewImgSrc: "",
      isView: true,
      updateParams: {
        planCode: "jh00001",
        planName: "XXXX采购计划表",
        companyName: "XXX 有限公司",
        buyer: "XXX 公司",
        manager: "张三主管",
        pm: "胡八一",
        materialMan: "陈策",
        projectName: "深圳湾一号",
        total: "10000",
        area: "10000",
        name: "HPB300",
        specification: "8",
        budget: "8",
        planTime: "2022-04-18",
        part: "B123钢筋房",
        remark: "备注",
      },
      planData: [
        {
          sn: "1",
          projectName: "深圳湾一号",
          total: "10000",
          area: "10000",
          name: "HPB100",
          specification: "8",
          budget: "8",
          planTime: "2022-04-18",
          part: "B111钢筋房",
          remark: "备注",
        },
        {
          sn: "2",
          projectName: "深圳湾二号",
          total: "20000",
          area: "20000",
          name: "HPB200",
          specification: "8",
          budget: "8",
          planTime: "2022-04-18",
          part: "B222钢筋房",
          remark: "备注",
        },
        {
          sn: "3",
          projectName: "深圳湾三号",
          total: "30000",
          area: "30000",
          name: "HPB300",
          specification: "8",
          budget: "8",
          planTime: "2022-04-18",
          part: "B333钢筋房",
          remark: "备注",
        },
      ],
      fileList: [
        {
          url: "https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg",
        },
      ],
      purchasingManagementList: [
        {
          id: 1,
          messageTitle: " 采购订单签收",
          messageName: "深圳市迅捷钢材采购计划表",
        },
        {
          id: 2,
          messageTitle: " 采购订单签收",
          messageName: "四川领袖建筑采购计划表",
        },
        {
          id: 3,
          messageTitle: " 采购订单签收",
          messageName: "重庆未来建筑采购计划表",
        },
        {
          id: 4,
          messageTitle: " 采购订单签收",
          messageName: "湖北通捷建筑采购计划表",
        },
        {
          id: 5,
          messageTitle: " 采购订单签收",
          messageName: "湖北时尚建材采购计划表",
        },
        {
          id: 6,
          messageTitle: " 采购订单签收",
          messageName: "四川马上建筑采购计划表",
        },
        {
          id: 7,
          messageTitle: " 采购订单签收",
          messageName: "四川通用建材采购计划表",
        },
      ],
      statementManagementList: [
        {
          id: 1,
          sureBill: "供应商账单确认1",
          number: "DZ000001",
          type: 1,
        },
        {
          id: 2,
          sureBill: "采购商账单确认2",
          number: "DZ000002",
          type: 2,
        },
        {
          id: 3,
          sureBill: "供应商账单确认3",
          number: "DZ000003",
          type: 1,
        },
        {
          id: 4,
          sureBill: "供应商账单确认4",
          number: "DZ000004",
          type: 1,
        },
        {
          id: 5,
          sureBill: "供应商账单确认5",
          number: "DZ000005",
          type: 1,
        },
        {
          id: 6,
          sureBill: "供应商账单确认6",
          number: "DZ000006",
          type: 1,
        },
        {
          id: 7,
          sureBill: "供应商账单确认7",
          number: "DZ000007",
          type: 1,
        },
        {
          id: 8,
          sureBill: "供应商账单确认8",
          number: "DZ000008",
          type: 1,
        },
      ],
      loading1: false,
      queryParams1: {
        total: 8,
        pageNum: 1,
        pageSize: 10,
      },
      loading2: false,
      queryParams2: {
        total: 8,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    handlePictureCardPreview(file) {
      this.previewImgSrc = file.url;
      this.previewImgDialog = true;
    },
    confirmSign() {
      this.msgSuccess('签收成功！');
      this.dialogVisible = false;
    },
    rejectSign() {
      this.msgSuccess('拒绝签收成功！');
      this.dialogVisible = false;
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
     toDealWith(row, type) {
      let path = "";
      let query = {
        id: row.id,
      };
      if (type === 1) {
        path = "/purchase-manager/purchase-plan-list";
      } else {
        if (row.type === 1) {
          path = "/supplierAccountStatement";
        } else {
          path = "/purchaserAccountStatement";
        }
      }

      this.$router.push({
        path,
        query,
      });
    },
    toSign(row, type) {
      this.dialogVisible = true;
      // let path = "";
      // let query = {
      //   id: row.id,
      // };
      // if (type === 1) {
      //   path = "/purchase-manager/purchase-plan-list";
      // } else {
      //   if (row.type === 1) {
      //     path = "/supplierAccountStatement";
      //   } else {
      //     path = "/purchaserAccountStatement";
      //   }
      // }

      // this.$router.push({
      //   path,
      //   query,
      // });
    },
    getList1() {
      this.loading1 = false;
      this.queryParams1.total = 8;
    },
    getList2() {
      this.loading2 = false;
      this.queryParams2.total = 8;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
   height: 100%;
  overflow-y: scroll;
  .data-info {
    overflow-y: scroll;
    .chart-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      p {
        display: inline-block;
        margin-right: 10px;
        font-size: 24px;
        font-weight: 500;
      }
      i {
        font-size: 24px;
      }
      .text {
        font-size: 28px;
        font-weight: 600;
      }
    }
    .table {
      &-title {
        font-size: 22px;
        font-weight: 600;
      }
      &-line {
        width: 100%;
        height: 1px;
        background-color: #e8e8e8;
        margin-top: 10px;
      }
    }
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
